<template>
  <view class="settings-container">
    <!-- 头部 -->
    <view class="header-section">
      <view class="header-icon">
        <uni-icons type="gear" size="40" color="#007aff"></uni-icons>
      </view>
      <text class="header-title">系统设置</text>
      <text class="header-subtitle">个性化您的应用体验</text>
    </view>

    <!-- 设置选项 -->
    <view class="settings-content">
      <!-- 账户安全 -->
      <view class="settings-group">
        <view class="group-title">
          <uni-icons type="locked" size="16" color="#007aff"></uni-icons>
          <text>账户安全</text>
        </view>
        
        <view class="settings-card">
          <view class="setting-item" @click="handleToPwd">
            <view class="item-left">
              <view class="item-icon">
                <uni-icons type="locked-filled" size="20" color="#ff6b6b"></uni-icons>
              </view>
              <view class="item-content">
                <text class="item-title">修改密码</text>
                <text class="item-desc">更新您的登录密码</text>
              </view>
            </view>
            <uni-icons type="right" size="16" color="#ccc"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 应用管理 -->
      <view class="settings-group">
        <view class="group-title">
          <uni-icons type="gear" size="16" color="#007aff"></uni-icons>
          <text>应用管理</text>
        </view>
        
        <view class="settings-card">
          <view class="setting-item" @click="handleToUpgrade">
            <view class="item-left">
              <view class="item-icon">
                <uni-icons type="refresh" size="20" color="#4ecdc4"></uni-icons>
              </view>
              <view class="item-content">
                <text class="item-title">检查更新</text>
                <text class="item-desc">当前版本 v{{ appVersion }}</text>
              </view>
            </view>
            <uni-icons type="right" size="16" color="#ccc"></uni-icons>
          </view>
          
          <view class="setting-item" @click="handleCleanTmp">
            <view class="item-left">
              <view class="item-icon">
                <uni-icons type="trash" size="20" color="#45b7d1"></uni-icons>
              </view>
              <view class="item-content">
                <text class="item-title">清理缓存</text>
                <text class="item-desc">释放存储空间</text>
              </view>
            </view>
            <uni-icons type="right" size="16" color="#ccc"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 通知设置 -->
      <view class="settings-group">
        <view class="group-title">
          <uni-icons type="notification" size="16" color="#007aff"></uni-icons>
          <text>通知设置</text>
        </view>
        
        <view class="settings-card">
          <view class="setting-item">
            <view class="item-left">
              <view class="item-icon">
                <uni-icons type="notification-filled" size="20" color="#f39c12"></uni-icons>
              </view>
              <view class="item-content">
                <text class="item-title">推送通知</text>
                <text class="item-desc">接收重要消息提醒</text>
              </view>
            </view>
            <switch :checked="notificationEnabled" @change="handleNotificationChange" color="#007aff" />
          </view>
          
          <view class="setting-item">
            <view class="item-left">
              <view class="item-icon">
                <uni-icons type="sound" size="20" color="#9b59b6"></uni-icons>
              </view>
              <view class="item-content">
                <text class="item-title">声音提醒</text>
                <text class="item-desc">通知时播放提示音</text>
              </view>
            </view>
            <switch :checked="soundEnabled" @change="handleSoundChange" color="#007aff" />
          </view>
        </view>
      </view>

      <!-- 关于应用 -->
      <view class="settings-group">
        <view class="group-title">
          <uni-icons type="info" size="16" color="#007aff"></uni-icons>
          <text>关于应用</text>
        </view>
        
        <view class="settings-card">
          <view class="setting-item" @click="handleAbout">
            <view class="item-left">
              <view class="item-icon">
                <uni-icons type="info-filled" size="20" color="#e74c3c"></uni-icons>
              </view>
              <view class="item-content">
                <text class="item-title">关于我们</text>
                <text class="item-desc">了解更多应用信息</text>
              </view>
            </view>
            <uni-icons type="right" size="16" color="#ccc"></uni-icons>
          </view>
          
          <view class="setting-item" @click="handleHelp">
            <view class="item-left">
              <view class="item-icon">
                <uni-icons type="help" size="20" color="#3498db"></uni-icons>
              </view>
              <view class="item-content">
                <text class="item-title">帮助中心</text>
                <text class="item-desc">常见问题解答</text>
              </view>
            </view>
            <uni-icons type="right" size="16" color="#ccc"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-section">
      <button class="logout-btn" @click="handleLogout">
        <uni-icons type="logout" size="18" color="#fff"></uni-icons>
        <text>退出登录</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from '@/store/modules/user'
import { useFileConfigStore } from '@/store/modules/fileConfig'
import { ref, computed, getCurrentInstance } from "vue"

const { proxy } = getCurrentInstance()

// 应用版本
const appVersion = ref('4.7.8')

// 通知设置
const notificationEnabled = ref(true)
const soundEnabled = ref(true)

function handleToPwd() {
  proxy.$tab.navigateTo('/pages/mine/pwd/index')
}

function handleToUpgrade() {
  proxy.$modal.showToast('当前已是最新版本')
}

async function handleCleanTmp() {
  try {
    await proxy.$modal.confirm('确定要清理缓存吗？清理后需要重新获取用户信息和文件配置。')
    
    proxy.$modal.showLoading('正在清理缓存...')
    
    const userStore = useUserStore()
    const fileConfigStore = useFileConfigStore()
    
    // 清除用户缓存（保留token）
    await userStore.clearUserCache()
    
    // 清除文件存储配置缓存
    fileConfigStore.clearCache()
    
    // 重新获取用户信息和权限
    await userStore.refreshUserInfo()
    
    proxy.$modal.hideLoading()
    proxy.$modal.msgSuccess('缓存清理完成，用户信息和文件配置已更新')
  } catch (error) {
    console.error('清理缓存失败:', error)
    proxy.$modal.hideLoading()
    proxy.$modal.msgError('清理缓存失败，请重试')
  }
}

function handleAbout() {
  proxy.$tab.navigateTo('/pages/mine/about/index')
}

function handleHelp() {
  proxy.$tab.navigateTo('/pages/mine/help/index')
}

function handleNotificationChange(e) {
  notificationEnabled.value = e.detail.value
  proxy.$modal.showToast(notificationEnabled.value ? '已开启推送通知' : '已关闭推送通知')
}

function handleSoundChange(e) {
  soundEnabled.value = e.detail.value
  proxy.$modal.showToast(soundEnabled.value ? '已开启声音提醒' : '已关闭声音提醒')
}

function handleLogout() {
  proxy.$modal.confirm('确定要退出登录吗？').then(() => {
    proxy.$modal.showLoading('正在退出...')
    const userStore = useUserStore()
    userStore.logOut().then(() => {
      proxy.$modal.hideLoading()
      proxy.$modal.msgSuccess('退出登录成功')
      proxy.$tab.reLaunch('/pages/login')
    }).catch((error) => {
      console.error('退出登录失败:', error)
      proxy.$modal.hideLoading()
      proxy.$modal.msgError('退出登录失败，请重试')
    })
  })
}
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';

.settings-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.header-section {
  text-align: center;
  margin-bottom: 40px;
  
  .header-icon {
    margin-bottom: 16px;
  }
  
  .header-title {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: $gray-800;
    margin-bottom: 8px;
  }
  
  .header-subtitle {
    display: block;
    font-size: 14px;
    color: $gray-600;
    line-height: 1.5;
  }
}

.settings-content {
  .settings-group {
    margin-bottom: 30px;
    
    .group-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      padding-left: 4px;
      
      text {
        font-size: 14px;
        font-weight: 600;
        color: $gray-700;
      }
    }
    
    .settings-card {
      background: #fff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      
      .setting-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 1px solid #f5f5f5;
        transition: background-color 0.2s ease;
        
        &:last-child {
          border-bottom: none;
        }
        
        &:active {
          background-color: #f8f9fa;
        }
        
        .item-left {
          display: flex;
          align-items: center;
          gap: 16px;
          flex: 1;
          
          .item-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          
          .item-content {
            flex: 1;
            
            .item-title {
              display: block;
              font-size: 16px;
              font-weight: 500;
              color: $gray-800;
              margin-bottom: 4px;
            }
            
            .item-desc {
              display: block;
              font-size: 13px;
              color: $gray-500;
            }
          }
        }
      }
    }
  }
}

.logout-section {
  margin-top: 40px;
  
  .logout-btn {
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    border: none;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    transition: all 0.3s ease;
    
    &:active {
      transform: translateY(1px);
    }
  }
}
</style>
